<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '审批人设置',
			size: '500px',
			appendToBody: true,
			closeOnClickModal: false
		}"
		:before-close="saveApprover"
		show-confirm
		@confirm="saveApprover"
		@close="closeDrawer"
	>
		<el-form label-position="top">
			<el-form-item label="审批标题">
				<el-input v-model="approverConfig.nodeName" />
			</el-form-item>

			<el-form-item label="审批人">
				<select-employees v-model="approverConfig.nodeUserList" />
			</el-form-item>
			<el-form-item label="操作">
				<cl-select
					v-model="approverConfig.operateType"
					placeholder="请选择"
					filterable
					style="width:100%"
					collapse-tags
					multiple
				>
					<el-option
						v-for="item in $const.OA_REFUND_OPT_TYPE"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="是否可编辑">
				<el-switch v-model="approverConfig.isEdit" :active-value="1" :inactive-value="0" />
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
import funcMixin from "./func.js";
import { mapGetters } from "vuex";
import SelectEmployees from "./select-employees";
export default {
	mixins: [funcMixin],
	props: ["directorMaxLevel"],
	components: {
		SelectEmployees
	},
	data() {
		return {
			visible: false,
			approverConfig: {
				nodeUserList: [],
				nodeUser: [],
				operateType: [],
				isEdit: 0
			},
			approverRoleVisible: false,
			checkedRoleList: []
		};
	},
	computed: {
		...mapGetters({
			approverConfig1: "flowDesignApproverConfig",
			approverDrawer: "flowDesignApproverDrawer"
		}),
		checkedNodeUserList() {
			const { nodeUserList } = this.approverConfig;
			return nodeUserList || [];
		},
		checkedNodeUser() {
			const { value } = this.approverConfig1;
			return (value?.nodeUser || []).map(Number);
		}
	},
	watch: {
		approverConfig1: {
			deep: true,
			handler(v) {
				this.approverConfig = {
					nodeUserList: [],
					operateType: [],
					...v?.value,
					nodeUser: [...this.checkedNodeUser],
					isEdit: v?.value?.isEdit ?? 0
					// operateType: v?.value?.operateType || []
				};
			}
		},
		approverDrawer(v) {
			this.toggle(v);
		}
	},
	methods: {
		toggle(v) {
			this[v ? "open" : "close"]();
		},
		open() {
			this.$refs.drawer.create();
		},
		close() {
			this.$refs.drawer.close();
		},
		saveApprover() {
			let { operateType, nodeUserList, ...args } = this.approverConfig;
			let config = {
				...args,
				settype: 1,
				operateType,
				nodeUserList,
				nodeUser: nodeUserList.map(v => v.user_id)
			};
			config.error = !this.setApproverStr(config) || !operateType.length;
			this.$store.commit("updateApproverConfig", {
				value: config,
				flag: true,
				id: this.approverConfig1.id
			});

			this.$emit("update:nodeConfig", config);
			this.closeDrawer();
		},
		closeDrawer() {
			this.$store.commit("updateApprover", false);
		}
	}
};
</script>
